<template>
	<view class="container">
		<!-- 题目详情页 -->
		<view class="question-detail" v-if="type === 'bank'">
			<view class="progress-bar">
				<view class="progress-inner" :style="{width: progress + '%'}"></view>
			</view>
			<view class="question-header">
				<text class="question-index">第 {{currentIndex + 1}}/{{questions.length}} 题</text>
				<text class="question-type">{{currentQuestion.type}}</text>
			</view>
			
			<view class="question-content">
				<text class="question-title">{{currentQuestion.title}}</text>
				
				<!-- 单选题 -->
				<view class="options" v-if="currentQuestion.questionType === 'single'">
					<view 
						class="option-item" 
						v-for="(option, index) in currentQuestion.options" 
						:key="index"
						:class="{
							'selected': userAnswer === option.value,
							'correct': showAnswer && option.value === currentQuestion.answer,
							'wrong': showAnswer && userAnswer === option.value && userAnswer !== currentQuestion.answer
						}"
						@click="selectOption(option.value)"
					>
						<text class="option-label">{{option.label}}</text>
						<text class="option-text">{{option.text}}</text>
					</view>
				</view>
				
				<!-- 多选题 -->
				<view class="options" v-if="currentQuestion.questionType === 'multiple'">
					<view 
						class="option-item" 
						v-for="(option, index) in currentQuestion.options" 
						:key="index"
						:class="{
							'selected': userAnswers.includes(option.value),
							'correct': showAnswer && currentQuestion.answer.includes(option.value),
							'wrong': showAnswer && userAnswers.includes(option.value) && !currentQuestion.answer.includes(option.value)
						}"
						@click="selectMultipleOption(option.value)"
					>
						<text class="option-label">{{option.label}}</text>
						<text class="option-text">{{option.text}}</text>
					</view>
				</view>
				
				<!-- 判断题 -->
				<view class="options" v-if="currentQuestion.questionType === 'judge'">
					<view 
						class="option-item" 
						v-for="(option, index) in [{label: 'A', text: '正确', value: true}, {label: 'B', text: '错误', value: false}]" 
						:key="index"
						:class="{
							'selected': userAnswer === option.value,
							'correct': showAnswer && option.value === currentQuestion.answer,
							'wrong': showAnswer && userAnswer === option.value && userAnswer !== currentQuestion.answer
						}"
						@click="selectOption(option.value)"
					>
						<text class="option-label">{{option.label}}</text>
						<text class="option-text">{{option.text}}</text>
					</view>
				</view>
			</view>
			
			<!-- 答案解析 -->
			<view class="answer-analysis" v-if="showAnswer">
				<view class="analysis-header">
					<text class="analysis-title">答案解析</text>
				</view>
				<view class="analysis-content">
					<view class="correct-answer">
						<text class="label">正确答案：</text>
						<text class="value">{{formatAnswer(currentQuestion.answer, currentQuestion.questionType)}}</text>
					</view>
					<view class="analysis-text">
						<text class="label">解析：</text>
						<text class="value">{{currentQuestion.analysis}}</text>
					</view>
				</view>
			</view>
			
			<!-- 底部操作栏 -->
			<view class="action-bar">
				<view class="action-btn" @click="collectQuestion">
					<text class="iconfont" :class="isCollected ? 'icon-star-filled' : 'icon-star'"></text>
					<text>{{isCollected ? '已收藏' : '收藏'}}</text>
				</view>
				<view class="action-btn" @click="showAnswer = !showAnswer">
					<text class="iconfont icon-eye"></text>
					<text>{{showAnswer ? '隐藏答案' : '查看答案'}}</text>
				</view>
				<view class="action-btn" @click="nextQuestion">
					<text>下一题</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>
		
		<!-- 每日一练 -->
		<view class="daily-practice" v-else-if="type === 'daily'">
			<view class="daily-header">
				<text class="daily-title">每日一练</text>
				<text class="daily-date">{{formatDate(new Date())}}</text>
			</view>
			
			<view class="daily-content">
				<view class="daily-info">
					<text class="info-text">今日题目：{{dailyQuestions.length}}题</text>
					<text class="info-text">已完成：{{completedCount}}/{{dailyQuestions.length}}</text>
				</view>
				
				<view class="question-list">
					<view 
						class="question-item" 
						v-for="(item, index) in dailyQuestions" 
						:key="index"
						@click="startDailyQuestion(index)"
					>
						<text class="question-num">第{{index + 1}}题</text>
						<text class="question-brief">{{item.title.substring(0, 20)}}...</text>
						<text class="question-status" :class="{'completed': item.completed}">
							{{item.completed ? '已完成' : '未完成'}}
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 错题集 -->
		<view class="wrong-questions" v-else-if="type === 'wrong'">
			<view class="section-header">
				<text class="section-title">我的错题</text>
				<text class="section-count">共{{wrongQuestions.length}}题</text>
			</view>
			
			<view class="question-list">
				<view 
					class="question-item" 
					v-for="(item, index) in wrongQuestions" 
					:key="index"
					@click="viewWrongQuestion(item)"
				>
					<view class="question-info">
						<text class="question-type-tag">{{item.type}}</text>
						<text class="question-date">{{item.date}}</text>
					</view>
					<text class="question-title">{{item.title}}</text>
					<view class="question-footer">
						<text class="wrong-count">错误{{item.wrongCount}}次</text>
						<text class="view-btn">查看详情</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 自定义题库 -->
		<view class="custom-questions" v-else-if="type === 'custom'">
			<view class="section-header">
				<text class="section-title">自定义题库</text>
				<text class="add-btn" @click="createCustomBank">+ 新建题库</text>
			</view>
			
			<view class="custom-bank-list">
				<view 
					class="custom-bank-item" 
					v-for="(item, index) in customBanks" 
					:key="index"
					@click="openCustomBank(item)"
				>
					<view class="bank-info">
						<text class="bank-title">{{item.title}}</text>
						<text class="bank-count">{{item.questionCount}}题</text>
					</view>
					<view class="bank-progress">
						<view class="progress-bar">
							<view class="progress-inner" :style="{width: item.progress + '%'}"></view>
						</view>
						<text class="progress-text">已完成{{item.progress}}%</text>
					</view>
					<view class="bank-footer">
						<text class="bank-date">创建于 {{item.createDate}}</text>
						<view class="bank-actions">
							<text class="action-btn edit" @click.stop="editCustomBank(item)">编辑</text>
							<text class="action-btn delete" @click.stop="deleteCustomBank(item)">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 其他页面可以根据需要添加 -->
		<view class="placeholder" v-else>
			<text>{{type}} 页面开发中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				id: '',
				// 题库相关
				questions: [],
				currentIndex: 0,
				userAnswer: null,
				userAnswers: [],
				showAnswer: false,
				progress: 0,
				isCollected: false,
				
				// 每日一练相关
				dailyQuestions: [],
				completedCount: 0,
				
				// 错题集相关
				wrongQuestions: [],
				
				// 自定义题库相关
				customBanks: []
			}
		},
		computed: {
			currentQuestion() {
				return this.questions[this.currentIndex] || {};
			}
		},
		onLoad(options) {
			this.type = options.type || '';
			this.id = options.id || '';
			
			// 根据类型加载不同数据
			switch(this.type) {
				case 'bank':
					this.loadQuestionBank();
					break;
				case 'daily':
					this.loadDailyPractice();
					break;
				case 'wrong':
					this.loadWrongQuestions();
					break;
				case 'custom':
					this.loadCustomBanks();
					break;
				default:
					// 其他类型的处理
					break;
			}
		},
		methods: {
			// 题库相关方法
			loadQuestionBank() {
				// 模拟加载题库数据
				setTimeout(() => {
					this.questions = [
						{
							id: 1,
							title: '下列关于中国特色社会主义制度的说法，正确的是（ ）',
							questionType: 'single',
							type: '单选题',
							options: [
								{ label: 'A', text: '中国特色社会主义制度是党和人民长期实践取得的根本成就', value: 'A' },
								{ label: 'B', text: '中国特色社会主义制度是对马克思主义国家学说的背离', value: 'B' },
								{ label: 'C', text: '中国特色社会主义制度是西方制度在中国的具体应用', value: 'C' },
								{ label: 'D', text: '中国特色社会主义制度是对传统社会主义制度的全面否定', value: 'D' }
							],
							answer: 'A',
							analysis: '中国特色社会主义制度是党和人民在长期实践探索中形成的科学制度体系，是当代中国发展进步的根本制度保障。选项B、C、D都是错误的观点。'
						},
						{
							id: 2,
							title: '下列哪些是我国宪法规定的公民的基本权利（ ）',
							questionType: 'multiple',
							type: '多选题',
							options: [
								{ label: 'A', text: '选举权和被选举权', value: 'A' },
								{ label: 'B', text: '言论、出版、集会、结社、游行、示威的自由', value: 'B' },
								{ label: 'C', text: '宗教信仰自由', value: 'C' },
								{ label: 'D', text: '人身自由不受侵犯', value: 'D' }
							],
							answer: ['A', 'B', 'C', 'D'],
							analysis: '我国宪法规定的公民的基本权利包括：选举权和被选举权、言论、出版、集会、结社、游行、示威的自由、宗教信仰自由、人身自由不受侵犯等。'
						},
						{
							id: 3,
							title: '党的十九大报告指出，中国特色社会主义进入了新时代，我国社会主要矛盾已经转化为人民日益增长的美好生活需要和不平衡不充分的发展之间的矛盾。',
							questionType: 'judge',
							type: '判断题',
							answer: true,
							analysis: '党的十九大报告明确指出，中国特色社会主义进入了新时代，我国社会主要矛盾已经转化为人民日益增长的美好生活需要和不平衡不充分的发展之间的矛盾。这一论断是正确的。'
						}
					];
					
					this.updateProgress();
				}, 500);
			},
			selectOption(value) {
				if (this.showAnswer) return;
				this.userAnswer = value;
			},
			selectMultipleOption(value) {
				if (this.showAnswer) return;
				
				const index = this.userAnswers.indexOf(value);
				if (index === -1) {
					this.userAnswers.push(value);
				} else {
					this.userAnswers.splice(index, 1);
				}
			},
			nextQuestion() {
				if (this.currentIndex < this.questions.length - 1) {
					// 保存当前答案
					this.saveAnswer();
					
					// 重置状态
					this.currentIndex++;
					this.userAnswer = null;
					this.userAnswers = [];
					this.showAnswer = false;
					this.updateProgress();
				} else {
					// 已经是最后一题
					uni.showModal({
						title: '提示',
						content: '已经是最后一题了，是否返回题库？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack();
							}
						}
					});
				}
			},
			saveAnswer() {
				// 保存答案逻辑
				console.log('保存答案:', this.currentQuestion.id, this.userAnswer || this.userAnswers);
			},
			updateProgress() {
				this.progress = Math.round((this.currentIndex + 1) / this.questions.length * 100);
			},
			collectQuestion() {
				this.isCollected = !this.isCollected;
				uni.showToast({
					title: this.isCollected ? '收藏成功' : '已取消收藏',
					icon: 'success'
				});
			},
			formatAnswer(answer, type) {
				if (type === 'multiple') {
					return answer.join('、');
				} else if (type === 'judge') {
					return answer ? '正确' : '错误';
				}
				return answer;
			},
			
			// 每日一练相关方法
			loadDailyPractice() {
				// 模拟加载每日一练数据
				setTimeout(() => {
					this.dailyQuestions = [
						{
							id: 1,
							title: '下列关于中国特色社会主义制度的说法，正确的是（ ）',
							completed: true
						},
						{
							id: 2,
							title: '下列哪些是我国宪法规定的公民的基本权利（ ）',
							completed: true
						},
						{
							id: 3,
							title: '党的十九大报告指出，中国特色社会主义进入了新时代，我国社会主要矛盾已经转化为人民日益增长的美好生活需要和不平衡不充分的发展之间的矛盾。',
							completed: false
						},
						{
							id: 4,
							title: '下列关于我国基本经济制度的表述，正确的是（ ）',
							completed: false
						},
						{
							id: 5,
							title: '关于我国政治制度，下列说法正确的是（ ）',
							completed: false
						}
					];
					
					this.completedCount = this.dailyQuestions.filter(item => item.completed).length;
				}, 500);
			},
			startDailyQuestion(index) {
				// 跳转到题目详情
				uni.navigateTo({
					url: `/pages/shanganbao/detail/detail?type=bank&id=daily&index=${index}`
				});
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}年${month}月${day}日`;
			},
			
			// 错题集相关方法
			loadWrongQuestions() {
				// 模拟加载错题数据
				setTimeout(() => {
					this.wrongQuestions = [
						{
							id: 1,
							title: '下列关于中国特色社会主义制度的说法，正确的是（ ）',
							type: '单选题',
							date: '2025-08-30',
							wrongCount: 2
						},
						{
							id: 2,
							title: '下列哪些是我国宪法规定的公民的基本权利（ ）',
							type: '多选题',
							date: '2025-08-28',
							wrongCount: 3
						},
						{
							id: 3,
							title: '党的十九大报告指出，中国特色社会主义进入了新时代，我国社会主要矛盾已经转化为人民日益增长的美好生活需要和不平衡不充分的发展之间的矛盾。',
							type: '判断题',
							date: '2025-08-25',
							wrongCount: 1
						}
					];
				}, 500);
			},
			viewWrongQuestion(item) {
				// 跳转到题目详情
				uni.navigateTo({
					url: `/pages/shanganbao/detail/detail?type=bank&id=wrong&qid=${item.id}`
				});
			},
			
			// 自定义题库相关方法
			loadCustomBanks() {
				// 模拟加载自定义题库数据
				setTimeout(() => {
					this.customBanks = [
						{
							id: 1,
							title: '公务员行测重点题',
							questionCount: 50,
							progress: 60,
							createDate: '2025-08-15'
						},
						{
							id: 2,
							title: '事业单位公基易错题',
							questionCount: 30,
							progress: 40,
							createDate: '2025-08-20'
						},
						{
							id: 3,
							title: '教师资格证必考点',
							questionCount: 45,
							progress: 20,
							createDate: '2025-08-25'
						}
					];
				}, 500);
			},
			createCustomBank() {
				uni.showToast({
					title: '新建题库功能开发中',
					icon: 'none'
				});
			},
			openCustomBank(item) {
				// 跳转到题库详情
				uni.navigateTo({
					url: `/pages/shanganbao/detail/detail?type=bank&id=custom&bid=${item.id}`
				});
			},
			editCustomBank(item) {
				uni.showToast({
					title: '编辑题库功能开发中',
					icon: 'none'
				});
			},
			deleteCustomBank(item) {
				uni.showModal({
					title: '提示',
					content: `确定要删除"${item.title}"题库吗？`,
					success: (res) => {
						if (res.confirm) {
							// 模拟删除
							const index = this.customBanks.findIndex(bank => bank.id === item.id);
							if (index !== -1) {
								this.customBanks.splice(index, 1);
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 题目详情样式 */
	.question-detail {
		background-color: #FFFFFF;
		padding-bottom: 50px;
	}
	
	.progress-bar {
		height: 4px;
		background-color: #eee;
	}
	
	.progress-inner {
		height: 100%;
		background-color: #1296db;
		transition: width 0.3s;
	}
	
	.question-header {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.question-index {
		font-size: 16px;
		color: #333;
		font-weight: bold;
	}
	
	.question-type {
		font-size: 14px;
		color: #1296db;
		background-color: rgba(18, 150, 219, 0.1);
		padding: 2px 8px;
		border-radius: 10px;
	}
	
	.question-content {
		padding: 15px;
	}
	
	.question-title {
		font-size: 16px;
		color: #333;
		line-height: 1.6;
		margin-bottom: 20px;
	}
	
	.option-item {
		display: flex;
		padding: 12px 15px;
		border: 1px solid #eee;
		border-radius: 5px;
		margin-bottom: 10px;
	}
	
	.option-item.selected {
		background-color: rgba(18, 150, 219, 0.1);
		border-color: #1296db;
	}
	
	.option-item.correct {
		background-color: rgba(82, 196, 26, 0.1);
		border-color: #52c41a;
	}
	
	.option-item.wrong {
		background-color: rgba(245, 34, 45, 0.1);
		border-color: #f5222d;
	}
	
	.option-label {
		width: 24px;
		height: 24px;
		background-color: #f5f5f5;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}
	
	.option-item.selected .option-label {
		background-color: #1296db;
		color: #FFFFFF;
	}
	
	.option-item.correct .option-label {
		background-color: #52c41a;
		color: #FFFFFF;
	}
	
	.option-item.wrong .option-label {
		background-color: #f5222d;
		color: #FFFFFF;
	}
	
	.option-text {
		flex: 1;
		font-size: 14px;
		color: #333;
		line-height: 1.5;
	}
	
	.answer-analysis {
		margin: 15px;
		background-color: #f9f9f9;
		border-radius: 5px;
		padding: 15px;
	}
	
	.analysis-header {
		margin-bottom: 10px;
	}
	
	.analysis-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}
	
	.correct-answer, .analysis-text {
		margin-bottom: 10px;
	}
	
	.label {
		font-size: 14px;
		color: #666;
		margin-right: 5px;
	}
	
	.value {
		font-size: 14px;
		color: #333;
		line-height: 1.5;
	}
	
	.action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background-color: #FFFFFF;
		border-top: 1px solid #eee;
		padding: 10px 0;
	}
	
	.action-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		color: #666;
	}
	
	.action-btn .iconfont {
		font-size: 20px;
		margin-bottom: 3px;
	}
	
	.action-btn:last-child {
		color: #1296db;
	}
	
	/* 其他页面样式 */
	.daily-practice, .wrong-questions, .custom-questions {
		padding: 15px;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
	
	.question-item {
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}
	
	.placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300px;
		font-size: 16px;
		color: #999;
	}
</style>